<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
    <!-- <script>
        // 构建一个不存在的元素 ，但可以使用DOM方法
        let box =  document.createDocumentFragment()

        for (let i = 0; i < 10; i++) {
            let divDom = document.createElement("div")
            // 会导致每添加一个元素，页面重新渲染一次
            // document.body.appendChild(divDom);

            // 该位置的操作相当于将元素添加到一个统一的记录区域
            // （可以简单的认为box就是一个临时的父级标签）
            box.appendChild(divDom);
        }
        document.body.appendChild(box);
    </script> -->
</head>
<body>
    <!-- <template>
        <h1>测试数据</h1>
    </template>
    <hr> -->
    <div id="app">
        <h2>辅助标签 template </h2>
        <input type="button" value="显示和隐藏元素" @click=" flag=!flag ">
        <p v-if="flag">标签元素1</p>
        <p v-if="flag">标签元素2</p>
        <p v-if="flag">标签元素3</p>
        <p v-if="flag">标签元素4</p>
        <p v-if="flag">标签元素5</p>
        <p v-if="flag">标签元素6</p>
        <h4>使用 template 辅助标签 => 辅助标签只能定义 v-if 和 v-for 指令</h4>
        <!-- template 在特定场景下，可以减少 v-if 数量，提高操作性能 -->
        <template v-if="flag">
            <p>标签元素1</p>
            <p>标签元素2</p>
            <p>标签元素3</p>
            <p>标签元素4</p>
            <p>标签元素5</p>
            <p>标签元素6</p>
        </template>
        <hr>
        <p>用户名:{{ user.name }}</p>
        <p>电话:{{ user.tel }}</p>
        <hr>
        <!-- <p v-for=" u in users ">用户名:{{ u.name }}</p>
        <p v-for=" u in users ">电话:{{ u.tel }}</p>
        <hr v-for=" u in users "> -->
        <template v-for=" u in users ">
            <p>用户名:{{ u.name }}</p>
            <p>电话:{{ u.tel }}</p>
            <hr>
        </template>
        <hr>
        <h2>辅助属性 key </h2>
        <p>辅助属性key 是为vue进行元素渲染时，提供用于识别数据和元素关系的唯一指定代号</p>
        <p>所以key 必须在当前项目中唯一，且和数据直接存在唯一指向关系</p>
        <input type="button" value="addEndStu" @click="addEndStu()">
        <input type="button" value="addStartStu" @click="addStartStu()">
        <input type="button" value="change3Stu" @click="change3Stu()">
        <ul>
            <!-- v-for 基于就近渲染原则只会对变化的数据进行重新渲染【循环结构中和数据无关的标签不会重新渲染而是重复使用】 -->
            <!-- v-for 使用辅助属性 key 取值数组下标，和没有使用辅助属性是一样 -->
            <!-- <li v-for=" (s,i) in stus" :key="i">
                <input type="checkbox">
                {{ s }}
            </li> -->
            <!-- <li v-for=" (s,i) in stus" :key="i">{{ s }}</li> -->
            <li v-for=" (s,i) in stus" :key="s.id">
                <input type="checkbox">{{ s }}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for=" (s,i) in stus">
                <!-- 该案例在没有key时，依然可以让复选框的状态和数据同步，是因为复选框的checked属性和数据产生绑定关系 -->
                <input type="checkbox" :checked="s.state">
                {{ s }}
            </li>
        </ul>
        <hr>
    </div>
    <script src="../assets/mock/mock-min.js"></script>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    flag:true,
                    // panel:1,
                    user:{
                        name:"tom",
                        tel:12345678901
                    },
                    users:Mock.mock({
                        "list|5":[
                            {
                                name:"@cname",
                                tel:/^1\d{10}$/
                            }
                        ]
                    }).list,
                    stus:Mock.mock({
                        "list|5":[
                            {
                                id:"@id",
                                name:"@cname",
                                tel:/^1\d{10}$/,
                                "state|1":[true,false]
                            }
                        ]
                    }).list
                }
            },
            methods:{
                addEndStu(){
                    this.stus.push(Mock.mock({
                        id:"@id",
                        name:"@cname",
                        tel:/^1\d{10}$/,
                        state:false
                    }))
                },
                addStartStu(){
                    this.stus.unshift(Mock.mock({
                        id:"@id",
                        name:"@cname",
                        tel:/^1\d{10}$/,
                        state:false
                    }))
                },
                change3Stu(){
                    this.stus[3] = Mock.mock({
                        id:"@id",
                        name:"@cname",
                        tel:/^1\d{10}$/,
                        state:false
                    })
                }
            }
        }).mount("#app")
    </script>
</body>
</html>